<template>
    <div v-if = "props.visible" class="modal-overlay" @click="closeModal" >
        <div class="modal-content" @click.stop>
            <div class="rounded-rectangle">
                <div class="rounded-rectangle">
                    <div class="leftrounded" >
                        <el-carousel :interval="0" :autoplay="false"  arrow="always" height="100%" >
                            <el-carousel-item v-for= "(image,index) in imageUrls" :key="index">
                                <img :src="image" alt="image" class="carousel-image" />
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <el-col class="rightrounded">
                        <p class="left-aligned-text">请描述你的领养理由</p>
                        <div class = "inner-rounded-rectangle">
                            <el-scrollbar class="full-size-scrollbar">
                                <el-input
                                    v-model="inputText"
                                    type="textarea"
                                    maxlength="1000"
                                    show-word-limit
                                    :autosize="{ minRows: 19, maxRows: 1000 }"
                                    placeholder="请输入内容"
                                    style="font-size:16px;--el-input-inner-height: 16px;"
                                ></el-input>
                            </el-scrollbar>
                        </div>
                        <div class="button-container">
                            <el-button type="warning" color="#FFD466" class="large-button " @click = "sendapply">提交</el-button>
                            <el-button type="info" class="large-button " @click="cancel">取消</el-button>
                        </div>
                    </el-col>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watchEffect , defineEmits , onMounted } from 'vue';
import axios from "axios";
import {ElMessage} from "element-plus";

// 接收父组件传递的属性
const props = ({
    visible: {
        type: Boolean,
        default: false
    }
});
// 定义响应式数据
const inputText = ref('');
const paragraphsSet = ref(new Set());

// 监听inputText的变化
watchEffect(() => {
    if (inputText.value) {
        paragraphsSet.value.add(inputText.value);
    }
});
const userData = JSON.parse(sessionStorage.getItem('token'));
const userID = userData.userID;
const imageUrls = ref([]);
const userData0 = JSON.parse(sessionStorage.getItem('AdoptPassageID'));
// 设置axios的默认请求头，用于后续请求携带token
axios.defaults.headers.common['Authorization'] = `${userData.token}`;
onMounted(async () => {
    console.log("进来了");
    console.log(userData0.PassageID);
    const response = await axios.get(`http://localhost:8080/passage/pic/${userData0.PassageID}`);
    if (response.status == 200) {
        console.log(response.data);
        imageUrls.value = response.data;
    } else {
        console.log("error");
    }
})
const sendapply = async () => {
    if(inputText.value.length === 0){
        alert('请输入领养理由');
    }
    try{
        const response = await axios.post( 'http://localhost:8080/adopt/application/add', {
            pa_id: userData0.PassageID,    //文章ID
            user_id : userID,  //用户ID
            reason: inputText.value,   //理由
            adopt_process : 0,  //领养状态
        })
        if(response.status === 200){
            console.log(response.data);
            ElMessage({
                message: '提交成功',
                type: 'success',
                style: 'font-size:25px;font-weight:bold;',
                offset: 55,
                grouping:true
            })
            emit('adoptStatus');
            closeModal();
        }
    }catch(error){
        console.log(error);
        alert("网络错误，请再次尝试")
    }
}
const cancel = ()  => {
    if(paragraphsSet.value.size > 0){
        alert('请注意：退出后页面不会保存您的申请内容');
        inputText.value = '';
    }
    closeModal();
}
// 定义关闭模态框的方法并向父组件发送关闭事件
const closeModal = () => {
    emit('close');
    props.visible.value = false;
};

// 定义 emits
const emit = defineEmits(['close']);
</script>

<style scoped>
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
//background: rgba(0, 0, 0, 0); /* 背景虚化 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    width: 70%; /* 设置宽度为页面的60% */
    height: 80%; /* 设置高度为页面的80% */
    overflow: auto;
}
.rounded-rectangle {
    border-radius: 20px;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: space-between;
}
.leftrounded, .rightrounded {
    flex: 1; /* 左右两部分各占一半宽度 */
    width: 98%; /* 设置宽度为页面的100% */
    height: 100%; /* 设置高度为页面的100% */
}
.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持图片比例并填充容器 */
}
.el-carousel {
    width: 100%;
    height: 100%;
}
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 500px;
    margin: 0;
}

.rightrounded {
    border-radius: 20px; /* 圆弧长方形 */
    color : grey;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px; /* 添加内边距 */
}

.left-aligned-text {
    margin-top:-5px;
    text-align: left; /* 靠左对齐 */
    font-size: 1.5em; /* 字体变大 */
    margin-bottom: 10px; /* 添加底部间距 */
    margin-left: 10px;
}

.inner-rounded-rectangle {
    border-radius: 20px; /* 圆弧长方形 */
    padding: 10px; /* 添加内边距 */
    background: white;
    width: 100%; /* 设置宽度为页面的90% */
    height: 100%; /* 设置高度为页面的90% */
    overflow: hidden; /* 隐藏溢出内容 */
    margin: auto;
}

.button-container {
    display: flex;
    justify-content: flex-end; /* 按钮靠右 */
    margin-top: 5px; /* 增加上方的间距 */
}

.large-button {
  font-size: 16px; /* 放大按钮 */
  width:75px;
  border-radius: 10px;
  color:white;
  height:35px;
  font-weight:bold;
}
.large-button:hover{
  color:white;
}

.full-size-scrollbar {
    height: 100%; /* 设置高度为100% */
}

.full-size-input {
    width: 100%; /* 设置宽度为100% */
    height: 100%; /* 设置高度为100% */
    box-sizing: border-box; /* 确保内边距和边框包含在宽度和高度内 */
//resize: none; /* 禁止用户调整大小 */
    font-size: 20px; /* 设置字体大小 */
    color: #333; /* 设置字体颜色 */
}
.no-border >>> .el-textarea__inner:focus {
    border-color: transparent; /* 移除获得焦点时的蓝色边框 */
}
</style>
